<template>
  <div style="text-align: left;">
    <Row>
      <i-col :xs="24" :sm="24" :md="24" :lg="24" :xl="20" :xxl="14" style="text-align: right; margin-bottom: 20px;">
        <span v-if="htmlEditor.isShow">
          <Button type="info" icon="md-search" size="small" @click="preview()">预览</Button>
          <Button type="success" icon="md-checkmark" size="small" @click="save()">保存</Button>
          <Button icon="md-close" size="small" @click="hideHtmlEditor()">取消</Button>
        </span>
          <span v-else>
          <Button type="primary" icon="md-create" size="small" @click="showHtmlEditor()">编辑</Button>
        </span>
      </i-col>
    </Row>
    <Row>
      <i-col :xs="24" :sm="24" :md="24" :lg="24" :xl="20" :xxl="14">
        <table style="width: 100%;">
          <tr class="item-row">
            <td class="item-label">名称:</td>
            <td class="item-content">
              <Input type="text" v-model="param.name" v-if="htmlEditor.isShow"></Input>
              <template v-else>
                <span v-if="isEmpty(data.name)" style="color: #ccc;">暂无</span>
                <span v-else>{{data.name}}</span>
              </template>
            </td>
          </tr>
          <tr class="item-row">
            <td class="item-label" style="vertical-align: top;">APP支付说明:</td>
            <td class="item-content">
              <Card style="height: 500px;" dis-hover>
                <div style="width: 100%; height: 100%;" v-show="htmlEditor.isShow">
                  <quill-editor ref="htmlEditor_app" v-model="param.description" :options="editorOptionApp"></quill-editor>
                </div>
                <div style="width: 100%; height: 100%;" v-show="!htmlEditor.isShow">
                  <div style="text-align: center; color: #ccc;" v-if="isEmpty(data.description)">暂无内容</div>
                  <div v-html="data.description" v-else></div>
                </div>
              </Card>
            </td>
          </tr>
          <tr class="item-row">
            <td class="item-label" style="vertical-align: top;">PC支付说明:</td>
            <td class="item-content">
              <Card style="height: 500px;" dis-hover>
                <div style="width: 100%; height: 100%;" v-show="htmlEditor.isShow">
                  <quill-editor ref="htmlEditor_pc" v-model="param.pcDescription" :options="editorOptionPc"></quill-editor>
                </div>
                <div style="width: 100%; height: 100%;" v-show="!htmlEditor.isShow">
                  <div style="text-align: center; color: #ccc;" v-if="isEmpty(data.pcDescription)">暂无内容</div>
                  <div v-html="data.pcDescription" v-else></div>
                </div>
              </Card>
            </td>
          </tr>

        </table>
      </i-col>
    </Row>

    <!-- 预览弹窗 -->
    <Modal title="预览" v-model="previewModal.isShow" :width="1100" footer-hide>
      <div class="ql-editor" v-html="param.pcDescription"></div>
    </Modal>
  </div>
</template>

<script>
import Quill from 'quill';
import {isEmpty} from "../js/commonUtils";
import ImageResize from "quill-image-resize-module";
Quill.register('modules/imageResize', ImageResize);
import htmlEditButton from "quill-html-edit-button";
import {setFontSize} from "../widgets/quill/extension";
Quill.register("modules/htmlEditButton", htmlEditButton);
let AlignAttr = Quill.import('attributors/style/align');
let FontAttr = Quill.import('attributors/style/font');
let SizeAttr = Quill.import('attributors/style/size');
Quill.register(AlignAttr, true);
Quill.register(FontAttr, true);
Quill.register(SizeAttr, true);

export default {
  name: "WireTransferDesc",
  data() {
    return {
      htmlEditor: {
        isShow: false
      },
      previewModal: {
        isShow: false,
      },
      param: {
        id: "",
        name: "",
        description: "",
        pcDescription:""
      },
      data: {
        id: "",
        name: "",
        description: "",
        pcDescription:"",
        site: 0,
        createtime: 0,
      },
      editorOptionApp: {
        placeholder: '请编辑页面内容',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: [
              // [{'font': []}],//字体
              [{'header': [1, 2, 3, 4, 5, false]}, {'size': ['small', false, 'large', 'huge']}],
              ['bold', 'italic', 'underline', 'strike'],//加粗，斜体，下划线，删除线
              ['blockquote', 'link'],//引用，代码块
              [{'list': 'ordered'}, {'list': 'bullet'}],//列表
              [{'color': []}, {'background': []}],// 字体颜色，字体背景颜色
              [{'align': []}],//对齐方式
              ['image', 'video'],//上传图片、上传视频,
              ['clean'],//清除字体样式
            ],
            handlers: {
              // image: this.editorImageHandler,
              size: (value) => {
                this.setFontSize(value, "app")
              }
            },
          },
          htmlEditButton: {}
        }
      },
      editorOptionPc: {
        placeholder: '请编辑页面内容',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: [
              // [{'font': []}],//字体
              [{'header': [1, 2, 3, 4, 5, false]}, {'size': ['small', false, 'large', 'huge']}],
              ['bold', 'italic', 'underline', 'strike'],//加粗，斜体，下划线，删除线
              ['blockquote', 'link'],//引用，代码块
              [{'list': 'ordered'}, {'list': 'bullet'}],//列表
              [{'color': []}, {'background': []}],// 字体颜色，字体背景颜色
              [{'align': []}],//对齐方式
              ['image', 'video'],//上传图片、上传视频,
              ['clean'],//清除字体样式
            ],
            handlers: {
              // image: this.editorImageHandler,
              size: (value) => {
                this.setFontSize(value, "pc")
              }
            },
          },
          htmlEditButton: {}
        }
      },
    }
  },
  mounted() {
    this.queryWireTransferDesc();
  },
  methods: {
    isEmpty(val) {
      return isEmpty(val);s
    },
    queryWireTransferDesc() {
      this.$Spin.show();
      this.$apiOther.queryWireTransferDesc().then(response => {
        this.$Spin.hide();
        if(response.success) {
          let result = response.result;
          if(result != null) {
            this.data.id = result.id;
            this.data.name = result.name;
            this.data.description = result.description;
            this.data.pcDescription = result.pcDescription;
            this.data.site = result.site;
            this.data.createtime = result.createtime;
          }
        }else{
          console.error(response);
          this.$Message.error("查询线下支付说明失败！"+response.errorMessage);
        }
      }).catch(e => {
        this.$Spin.hide();
        console.error(e);
        this.$Message.error("查询线下支付说明失败！");
      });
    },
    showHtmlEditor() {
      this.param.id = this.data.id;
      this.param.name = this.data.name;
      this.param.description = this.data.description;
      this.param.pcDescription = this.data.pcDescription;
      this.htmlEditor.isShow = true;
    },
    hideHtmlEditor() {
      this.htmlEditor.isShow = false;
    },
    setFontSize(value, platform) {
      let editorRef = "";
      if(platform == "app"){
        editorRef = "htmlEditor_app";
      }else{
        editorRef = "htmlEditor_pc";
      }
      setFontSize(this, editorRef, value);
    },
    preview() {
      this.previewModal.isShow = true;
    },
    save() {
      if(isEmpty(this.param.description)) {
        this.$Message.error({content: "说明内容不能为空", duration: 2});
        return;
      }
      let params = this.param;
      this.$Spin.show();
      this.$apiOther.saveWireTransferDesc(params).then(response => {
        this.$Spin.hide();
        if(response.success) {
          this.htmlEditor.isShow = false;
          this.queryWireTransferDesc();
        }else{
          console.error(response);
          this.$Message.error("保存线下支付说明失败！"+response.errorMessage);
        }
      }).catch(e => {
        this.$Spin.hide();
        console.error(e);
        this.$Message.error("保存线下支付说明失败！");
      });
    },
  }
}
</script>

<style scoped lang="less">
@import "~quill/dist/quill.core.css";
@import "~quill/dist/quill.snow.css";
@import "~quill/dist/quill.bubble.css";
.quill-editor {
  overflow-y: visible;
  white-space: normal!important;
  height: 360px;
  img{
    width: 100%;
  }
}
.item-row {
  .item-label {
    width: 100px;
    height: 40px;
    text-align: right;
  }
  .item-content {
    text-align: left;
    padding-left: 10px;
  }
}
</style>
